import React from 'react';
import { Tabs, Card, Divider, Row, Table, Typography, Spin } from 'antd';
import moment from 'moment';
import { compact } from 'lodash';
import { useGradeTypes, useGrades, useDetail } from './hooks';
import styles from './style.less';

const columns = [
    {
        title: '职级名称',
        dataIndex: 'rankName',
        key: 'rankName',
        width: 120,
        render: text => (
            <Typography.Text style={{ width: 100, marginBottom: 0 }} title={text}>
                {text}
            </Typography.Text>
        )
    },
    {
        title: '职级',
        dataIndex: 'rankValue',
        key: 'rankValue',
        width: 100
    },
    {
        title: '职级定义',
        dataIndex: 'rankDesc',
        key: 'rankDesc',
        width: 500,
        render: (text, row) => (
            <>
                <Typography.Paragraph
                    className="dimension-paragraph"
                    ellipsis={{ rows: 7, expandable: true }}
                    style={{ whiteSpace: 'pre-line', marginBottom: 0 }}
                >
                    {text}
                    {text && (
                        <>
                            <span
                                style={{
                                    display: 'inline-block',
                                    marginBottom: row.rankDimensions && row.rankDimensions.length > 0 ? '14px' : 0
                                }}
                            >
                                &nbsp;
                            </span>
                            <br />
                        </>
                    )}
                    {row.rankDimensions &&
                        row.rankDimensions.length > 0 &&
                        row.rankDimensions.map(item => (
                            <>
                                <span className={styles.dimensionName}>{`· ${item.dimensionTypeName}：`}</span>
                                <span>{item.demand}</span>
                                <br />
                            </>
                        ))}
                </Typography.Paragraph>
            </>
        )
    }
];

const getTime = record => {
    if (record.auditEffectFlag === 'yes') {
        return '审核通过即可生效';
    }
    if (record.startTime === '') {
        return '';
    }
    return `${moment(record.startTime).format('YYYY-MM-DD')} 起`;
};

const Detail = props => {
    const { location } = props;
    const { query } = location;
    const [rankTypeCode, setRankTypeCode] = React.useState();
    const [gradeTypesLoading, gradeTypes] = useGradeTypes();
    const gradesQuery = React.useMemo(() => ({ rankTypeCode }), [rankTypeCode]);
    const [gradesLoading, grades] = useGrades(gradesQuery);

    const [loading, rulesDetail = {}] = useDetail(query);

    // 默认选中职级类型
    React.useEffect(() => {
        if (gradeTypes.length !== 0) {
            setRankTypeCode(String(gradeTypes[0].rankTypeCode));
        }
    }, [gradeTypes]);

    // 当前职级类型
    const gradeType = React.useMemo(() => gradeTypes.find(item => String(item.rankTypeCode) === rankTypeCode) || {}, [
        gradeTypes,
        rankTypeCode
    ]);

    const handleChange = key => {
        setRankTypeCode(key);
    };
    const renderTabs = React.useCallback(
        () => gradeTypes.map(item => <Tabs.TabPane tab={item.rankTypeName} key={item.rankTypeCode}></Tabs.TabPane>),
        [gradeTypes]
    );

    // 清除paragraph中title
    React.useEffect(() => {
        // 不使用setTimeout拿到的是展开的内容
        setTimeout(() => {
            const nodeList = document.querySelectorAll('.dimension-paragraph > span') || [];
            if (nodeList.length) {
                nodeList.forEach(dom => {
                    dom.setAttribute('title', '');
                });
            }
        }, 0);
    }, [grades]);

    return (
        <Card
            title="规章制度详情"
            style={{ margin: '12px 16px 16px 16px', background: '#fff' }}
            loading={gradeTypesLoading}
        >
            <div style={{ display: 'flex' }}>
                <div style={{ overflow: 'hidden', flex: 1, marginRight: 24 }}>
                    <Tabs activeKey={rankTypeCode} onChange={handleChange} className={styles.tabs}>
                        {renderTabs()}
                    </Tabs>
                    {gradeTypes.length !== 0 && (
                        <>
                            <div className={styles.title} style={{ marginTop: 24 }}>
                                职级序列
                            </div>
                            <div className={styles.definitionItem}>
                                <div>描述：</div>
                                <div>
                                    <Typography.Paragraph
                                        style={{ marginBottom: 0, whiteSpace: 'pre-line' }}
                                        title={gradeType.rankTypeDesc}
                                        ellipsis={{ rows: 3, expandable: true }}
                                    >
                                        {gradeType.rankTypeDesc}
                                    </Typography.Paragraph>
                                </div>
                            </div>
                            <Divider />
                        </>
                    )}

                    {gradeTypes.length !== 0 && (
                        <>
                            <Row type="flex" justify="space-between" style={{ marginBottom: 16 }}>
                                <div className={styles.title}>职级定义</div>
                            </Row>
                            <Table
                                rowKey="rankCode"
                                dataSource={grades}
                                columns={columns}
                                loading={gradesLoading}
                                pagination={false}
                            />
                        </>
                    )}
                </div>
                <div className={styles.ruleInfo}>
                    <h3>制度信息</h3>
                    <ul className={styles.detailBox}>
                        <Spin spinning={loading}>
                            <li>
                                <strong>制度分类：</strong>
                                <span>人事制度</span>
                            </li>
                            <li>
                                <strong>实施范围：</strong>
                                <span>{rulesDetail.companyName}</span>
                            </li>
                            <li>
                                <strong>生效日期：</strong>
                                <span>{getTime(rulesDetail)}</span>
                            </li>
                            <li>
                                <strong>发布人：</strong>
                                <span>{compact([rulesDetail.userName, rulesDetail.userPostName]).join('-')}</span>
                            </li>
                            <li>
                                <strong>审批人：</strong>
                                <span>{rulesDetail.approver}</span>
                            </li>
                            <li>
                                <strong>发布时间：</strong>
                                <span>{rulesDetail.publishTime}</span>
                            </li>
                            <li>
                                <strong>制度简介：</strong>
                                <span>{rulesDetail.institutionIntroduce}</span>
                            </li>
                        </Spin>
                    </ul>
                </div>
            </div>
        </Card>
    );
};

export default Detail;
